define(['./BaseView', 'jquery'], function (BaseView, $) {
    require('../../less/selectview.less');
    return BaseView.extend({
        type: "TabView",
        events: {
            'click .select-title li': 'showList',
            'click .select-view-mask': 'hideMask',
            'click .team-tab': 'hideTeam',
        },
        teamSelect: null,
        //  退出时隐藏mask
        initGoBack: function () {
            let _this = this;
            $('.left').click(function () {
                _this.hideMask();
            });
        },
        hideMask: function (e) {
            var _this = this;
            // 禁止 ios 在遮罩弹出后底层还可以滚动
            _this.$el.next('.main').css('overflowY', 'scroll');

            _this.$el.find('.select-view-mask').hide();
            _this.$selectTitle.find('.selected').removeClass('selected');
            _this.$selectList.find('.select-left-list').hide();
            _this.$selectList.find('.select-right-list').hide();
        },
        selectComplete: function (e) {
            var _this = this;
            var $this = $(e.currentTarget);
            var isLeft = $this.parent().hasClass('select-left-list');
            _this.$selectTitle.find('li').removeClass('selected');
            var text = $this.text();
            if (isLeft) {
                _this.$selectTitle.find('li:first span').text(text);
            } else {
                _this.$selectTitle.find('li:last span').text(text);
            }
            _this.hideMask();
        },
        render: function () {
            let _this = this;
            let tmp = `<div class="select-view">
                        <ul class="select-title">
                            <li val="0">
                            <span>我的</span>
                            </li>
                            <li val="1">
                            <span>2016-Q3</span></i>
                            </li>
                        </ul>

                        </div>
                        <div class="select-view-mask"></div>`;
            _this.$el.html(tmp);
            _this.$selectList = _this.$el.find('.select-view');
            _this.$selectTitle = _this.$el.find('.select-title');
            _this.addLeftList();
            _this.addRightList();
            _this.$mask = _this.$el.find('.select-view-mask');
            return this;
        },
        addLeftList: function () {
            var _this = this;
            var tpl = '<ul class="select-left-list" ><li class="selected me" val="">我的</li></ul>';
            this.$selectList.append(tpl);

            setTimeout(function () {
                // 页面渲染完之后计算除head之外屏幕高度, 用来给滚动设值
                var screenHeight = window.document.body.offsetHeight,
                    headHeight = _this.el.offsetHeight + _this.$el.parent().find('#AllOKRsHead')[0].offsetHeight,
                    maxHeight = screenHeight - headHeight;

                _this.$el.find('.select-left-list, .select-right-list').css('maxHeight', maxHeight);
            }, 500);
        },
        addRightList: function () {
            var tpl = '<ul class="select-right-list" ></ul>';
            this.$selectList.append(tpl);
        },
        showList: function (e) {
            var whichShow = $(e.currentTarget).attr('val');
            let _this = this;
            let $this = $(e.currentTarget);
            _this.initGoBack();

            if ($this.hasClass('selected')) {
                _this.hideMask();
                return;
            }
            // 禁止 ios 在遮罩弹出后底层还可以滚动
            _this.$el.next('.main').css('overflowY', 'hidden');

            this.className = {};
            $this.addClass('selected').siblings().removeClass('selected');
            switch (whichShow) {
                case "0":
                    _this.$selectList.find('.select-left-list').show();
                    _this.$selectList.find('.select-right-list').hide();

                    break;
                case "1":
                    _this.$selectList.find('.select-left-list').hide();
                    _this.$selectList.find('.select-right-list').show();
                    break;
            }

            _this.$mask.show();
        },
        selectMsg: function (e) {
            // 禁止 ios 在遮罩弹出后底层还可以滚动
            this.$el.next('.main').css('overflowY', 'scroll');

            if ($(e.currentTarget).hasClass("team-item")) {
                this.$(".team-item").removeClass("team-item-select");
                $(e.currentTarget).addClass('team-item-select');
                this.teamSelect = ($(e.currentTarget).text());
            } else {
                let $this = $(e.target);
                let _this = this;
                let current = $this.text();
                let itemTitle = _this.$selectTitle.find('.selected').index();
                $this.addClass('selected');
                _this.$selectTitle.find('.selected span').text(current);
                _this.$selectList.hide();
                _this.$mask.hide();
                _this.$selectTitle.find('.selected').removeClass('selected');
                _this.trigger('itemSelect', {
                    itemName: current,
                    itemTitle: itemTitle
                });
            }

        },
        setItem: function () {
        }

    });
})